// 处理数据
const handleData = (item) => {
  const { data: optData } = item;
  if (!optData?.length) return;
  let x_data = [],
    series_data = [];
  optData.forEach((elem) => {
    x_data.push(elem.name);
    series_data.push(elem.value);
  });
  return {
    x_data,
    series_data,
  };
};

// 柱状图配置
export const createBarOption = (item) => {
  const data = handleData(item);
  if (!data) return {};

  const { x_data, series_data } = data;

  return {
    tooltip: {
      trigger: "axis",
    },
    toolbox: {
      show: true,
      feature: {
        dataView: {
          show: true,
          readOnly: false,
        },
        saveAsImage: {
          show: true,
        },
      },
    },
    grid: {
      left: "3%",
      right: "8%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      name: item.x_title,
      data: x_data,
    },
    yAxis: {
      type: "value",
      name: item.y_title,
    },
    series: [
      {
        name: item.y_title,
        type: "bar",
        data: series_data,
        markPoint: {
          data: [
            {
              type: "max",
              name: "Max",
            },
            {
              type: "min",
              name: "Min",
            },
          ],
        },
        markLine: {
          label: {
            formatter: "平均值\n{c}",
          },
          data: [
            {
              type: "average",
              name: "平均线",
            },
          ],
        },
      },
    ],
  };
};
const lineColor = [
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
];

// 折线图配置
export const createLineOption = (item, colorIndex = 0) => {
  const data = handleData(item);
  if (!data) return {};

  const { x_data, series_data } = data;
  return {
    color: lineColor[colorIndex],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    toolbox: {
      show: true,
      feature: {
        dataView: {
          show: true,
          readOnly: false,
        },
        saveAsImage: {
          show: true,
        },
      },
    },
    grid: {
      left: "3%",
      right: "6%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        name: item.x_title,
        data: x_data,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: item.y_title,
      },
    ],
    series: [
      {
        name: item.file_name,
        type: "line",
        ...(!colorIndex ? { areaStyle: {} } : {}),
        emphasis: {
          focus: "series",
        },
        data: series_data,
      },
    ],
  };
};

// 散点图配置
export const createScatterOption = (item) => {
  const data = handleData(item);
  if (!data) return {};

  const { series_data } = data;

  // 处理散点数据
  const seriesData = series_data.map((v) => {
    if (Array.isArray(v)) {
      return v;
    } else {
      // 单值生成不了散点
      return [v, v];
    }
  });

  return {
    color: ["#73c0de", "#9a60b4", "#ea7ccc"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    toolbox: {
      show: true,
      feature: {
        dataView: {
          show: true,
          readOnly: false,
        },
        saveAsImage: {
          show: true,
        },
      },
    },
    grid: {
      left: "3%",
      right: "6%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      name: item.x_title,
      // data: x_data
    },
    yAxis: {
      name: item.y_title,
    },
    series: [
      {
        type: "scatter",
        data: seriesData,
        name: item.file_name,
      },
    ],
  };
};

// 饼图配置
export const createPieOption = (item) => {
  const { data = [] } = item;
  if (!data?.length) return {};

  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "0%",
      left: "center",
    },
    series: [
      {
        name: item.file_name || "",
        type: "pie",
        center: ["50%", "55%"],
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ],
  };
};

// 地图配置
export const createMapOptions = (item) => {
  const { data = [] } = item;

  let max = 0;
  data.forEach((elem) => {
    if (elem.value > max) {
      max = elem.value;
    }
  });

  return {
    backgroundColor: "#F3F1EC",
    tooltip: {
      trigger: "item",
    },
    toolbox: {
      show: true,
      feature: {
        dataView: {
          show: true,
          readOnly: false,
        },
        saveAsImage: {
          show: true,
        },
      },
    },
    visualMap: {
      min: 0,
      max: max,
      left: "left",
      top: "bottom",
      text: ["高", "低"],
      inRange: {
        color: [
          "#b2cdee",
          "#4575b4",
          "#74add1",
          "#abd9e9",
          "#e0f3f8",
          "#ffffbf",
          "#fee090",
          "#fdae61",
          "#f46d43",
          "#d73027",
          "#a50026",
        ],
      },
      calculable: true,
    },
    series: [
      {
        name: "地图",
        type: "map",
        map: "china",
        maptype: "china",
        roam: true,
        label: {
          show: true,
        },
        // center: ["50%", "50%"],
        zoom: 1,
        data: data,
      },
    ],
  };
};

// 1-柱状图 2-折线图 3-散点图 4-饼状图 5-热力图
export default function createOpts(item, type) {
  let opts = {};
  switch (type) {
    case "1":
      opts = createBarOption(item);
      break;
    case "2":
      opts = createLineOption(item);
      break;
    case "2.1":
      opts = createLineOption(item, 1);
      break;
    case "3":
      opts = createScatterOption(item);
      break;

    case "4":
      opts = createPieOption(item);
      break;
    case "5":
      opts = createMapOptions(item);
      break;
  }

  return opts;
}
